<template>
  <div class="content">
    <p class="lesstime">剩余支付时间：<!--<em>53:00</em>--> <em>{{minute}}:{{second}}</em></p>
    <div class="getorder_content">
      <h4 class="f14">订单信息</h4>
      <div class="getorder_list">
        <span class="getorder_left">拍摄地址</span>
        <span class="getorder_right">{{orderObj.shopName}}</span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="getorder_list">
        <span class="getorder_left">预约时间</span>
        <span class="getorder_right"><!--2018-12-03   12：15-->{{orderObj.orderTime | timeFilter}}<i class="iconfont icon arrow-left"></i></span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="getorder_list" v-for="(val , index) in mealArr">
        <span class="getorder_left" v-if="index == 0">已选产品</span>
        <span class="getorder_right">{{val.product.pname}} {{val.productType.pname}} {{val.itemConfig.itemValue}}   {{val.total}}元</span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
        <!--<span class="getorder_right">{{orderDetialObj.itemName}}  {{orderDetialObj.itemValue}}   {{orderDetialObj.itemPrice}}元</span>-->
        <!--<div class="hr_bottom" style="width: calc(100% - 15px);"></div>-->
      </div>

      <div class="getorder_list">
        <span class="getorder_left">优惠券</span>
        <span class="getorder_right">暂无可用优惠券<i class="iconfont icon arrow-left"></i></span>
      </div>
    </div>

    <div class="getorder_content">
      <h4 class="f14">个人信息</h4>
      <div class="getorder_list">
        <span class="getorder_left">姓名</span>
        <span class="getorder_right" placeholder="请填写您的姓名"><input type="text" v-model="orderObj.userName" placeholder="请填写您的姓名"></span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="getorder_list">
        <span class="getorder_left">生日</span>
        <span class="getorder_right" >
          <el-date-picker
          v-model="orderObj.birthDay"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
            </el-date-picker>
          <!--<i class="iconfont icon arrow-left"></i>--></span>
        <div class="hr_bottom" style="width: calc(100% - 15px);"></div>
      </div>
      <div class="getorder_list">
        <span class="getorder_left">性别</span>
        <span class="getorder_right" placeholder="请填写您的性别">
          <el-select v-model="orderObj.userSex" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select><!--<i class="iconfont icon arrow-left"></i>--></span>
      </div>
    </div>

    <div class="getorder_content">
      <h4 class="f14">支付方式</h4>
      <div class="wepay_list">
        <img src="../../assets/img/wepay_icon.png">
        微信支付
        <span class="wepay_content">
                <input type="radio" :value="1" v-model="payFlag" name="yljs" class="payradio-bg"/>
            </span>
      </div>

    </div>
    <div class="getorderbtn_group">
      <span>总计:<em>{{orderObj.money}}元</em><i>已抵扣:0元</i></span>
      <button @click="orderCreate">去支付</button>
    </div>
    <div class="pay_tip">
      <p>温馨提示：</p>
      <p>若拍摄当天取消拍摄，需收取20%手续费</p>
      <p>预约成功后可修改两次时间；如计划有变，可提前一天无条件退款</p>
    </div>
  </div>
</template>

<script>
  import SxOrderRecordApi from '@/api/manage/SxOrderRecordApi';
  import {getInfo, update} from '@/api/userLogin'
  import $ from 'jquery'
  import '@/utils/rem'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'gray',
          0: 'danger'
        }
        return statusMap[status]
      },
      validFilter(status) {
        const statusMap = {
          1: '有效',
          0: '作废'
        }
        return statusMap[status]
      },
      sexFilter(status) {
        const statusMap = {
          0: '女性',
          1: '男性'
        }
        return statusMap[status]
      },
      timeFilter(time) {
        if (time) {
          return new Date(time).Format('yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      }
    },
    data() {
      return {
        openId: '',
        userId: '',
        nickName: '',
        minutes: 59, //当前剩余分钟
        seconds: 59, //当前剩余秒数
        interValObj: 0, //timer变量，控制时间
        orderObj: {},
        payFlag: '0', //首次选择支付方式
        mealArr: [],  //订单套餐数组
        options: [{
          value: '0',
          label: '女性'
        }, {
          value: '1',
          label: '男性'
        }], //性别选择数组
      }
    },
    created() {

    },
    mounted() {
      /*let that = this
      this.openId = localStorage.getItem("openId")
      this.userId = localStorage.getItem("token")
      getInfo(this.userId).then((res) => {
        this.nickName = res.nickName
        this.headImg = res.headImg
      })*/
      /*this.orderObj = this.$route.query;*/

//      this.openId = this.$route.query.openId;

      this.openId = localStorage.getItem("openId")
      this.orderObj = {
          shopId: "门店id",
          shopName: "厦门宝龙一城店",
          shopTel: "门店电话",
          orderTime: 1546503655,
          money: "880",
          cart: [
          {
            total: 120,
            peopleCount: '3',
            product: {
              pid: '1',
              pname: '形象照',
              pprice: '100',
              pmoreImg: '',
              pindexImg: ''
            },
            productType: {
              pid: '1',
              pname: '半身照',
              pprice: '10',
              pmoreImg: '',
              pindexImg: ''
            },
            itemConfig: {
              itemValue: '半身六宫格'
            }
          },
            {
              total: 120,
              peopleCount: '1',
              product: {
                pid: '1',
                pname: '形象套餐',
                pprice: '100',
                pmoreImg: '',
                pindexImg: ''
              },
              productType: {
                pid: '1',
                pname: '形象套餐A',
                pprice: '10',
                pmoreImg: '',
                pindexImg: ''
              },
              itemConfig: {
                itemValue: ''
              }
            }
        ]
      };
      this.$set(this.orderObj , 'orderTime' , this.orderObj.scheduleTime);
      this.$set(this.orderObj , 'payType' , '0');
      console.log(this.orderObj);
      this.userInfo();
      this.add()
    },
    watch: {
      second: {
        handler (newVal) {
          this.num(newVal)
        }
      },
      minute: {
        handler (newVal) {
          this.num(newVal)
        }
      }
    },

    computed: {
      second: function () {
        return this.num(this.seconds)
      },
      minute: function () {
        return this.num(this.minutes)
      }
    },
    methods: {

      userInfo () {

        let token = localStorage.getItem("token");
        let that = this;
        that.$set(this.orderObj , 'userId' , token);
        getInfo(token).then((res) => {
          that.$set(this.orderObj , 'userName' , res.userName);
          that.$set(this.orderObj , 'userSex' , res.userSex);
          that.$set(this.orderObj , 'birthDay' , res.birthDay);
        });
        this.mealArr = this.orderObj.cart;
      },

      orderCreate () {

        let tempData = {};
        let that = this;
        let orderDetailArr = [];
        this.$set(this.orderObj , 'payType' , that.payFlag);

        if (this.orderObj.payType != '1') {
          this.$message({
            message: '请选择支付方式',
            type: 'warning'
          });
          return false;
        }
        tempData = this.orderObj;
        this.$_.forEach(this.mealArr , (v , k) => {
            let tempObj = {} ,productName ='';
            that.$set(tempObj , 'productPrice' , v.total);
            that.$set(tempObj , 'peopleCount' , v.peopleCount);
            that.$set(tempObj , 'productCount' , 1);
            that.$set(tempObj , 'productId' , v.product.pid);
            productName = v.itemConfig.itemValue == '' ? '': '('+v.itemConfig.itemValue +')';
            that.$set(tempObj , 'productName' , v.product.pname + '-' + v.productType.pname
              + productName);
          that.$set(tempObj , 'productImg' , v.product.pmoreImg);
          orderDetailArr.push(tempObj);
        });
        this.$set(tempData , 'details' , JSON.stringify(orderDetailArr));
        this.$set(tempData , 'cart' , '');
        SxOrderRecordApi.orderCreate(tempData).then((res) => {

          this.$message({
            title: '成功',
            message: '提交订单成功',
            type: 'success',
            duration: 1000,
            onClose() {
              that.payOrder(res, that.openId, that.orderObj.money);
            }
          })
        })
      },

      /**
       * 支付
       */
      payOrder(orderId, openId, money) {

        let that = this;

        money = '1';

        let tempData = {
          "totalFee": money,
          "openid": openId,
          "orderId": orderId
        };

        SxOrderRecordApi.unifiedOrder(tempData).then((json) => {
          that.json = json;
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady',
                that.onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady',
                that.onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady',
                that.onBridgeReady);
            }
          } else {
            that.onBridgeReady();
          }
        })
      },

      onBridgeReady() {
        let that = this;
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": this.json.appId,     //公众号名称,由商户传入
            "timeStamp": this.json.timeStamp,//时间戳,自1970年以来的秒数
            "nonceStr": this.json.nonceStr, //随机串
            "package": this.json.package,
            "signType": this.json.signType,//微信签名方式：
            "paySign": this.json.paySign //微信签名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              this.$message({
                message: '支付成功',
                type: 'success',
                duration: 1000,
                onClose() {
                  that.$router.push({path: '/userOrder'})
                }
              });
            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              this.$message({
                message: '支付失败',
                type: 'warning',
                duration: 1000
              });
            } else if (res.err_msg == "get_brand_wcpay_request:fail") {
              this.$message({
                message: '支付失败',
                type: 'warning',
                duration: 1000
              });
            }
          });
      },

      num: function (n) {
        return n < 10 ? '0' + n : '' + n
      },

      add: function () {
        var _this = this
        var time = window.setInterval(() => {
          if (_this.seconds === 0 && _this.minutes !== 0) {
            _this.seconds = 59
            _this.minutes -= 1
          } else if (_this.minutes === 0 && _this.seconds === 0) {
            _this.seconds = 0
            window.clearInterval(time)
            _this.$router.push({path: '/userHome'})
          } else {
            _this.seconds -= 1
          }
        }, 1000)
      },

      /*setTimer: function () {
        this.interValObj = setInterval(() => {
          this.scheduleEnd();
        }, 1000)
      },*/
      scheduleEnd() {

      }

    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
  @import "../../assets/css/order_gift.css";
  @import "../../assets/css/index_appointment.css";
</style>
